<template>
  <div>
    <div id="map"></div>
  <!-- 显示坐标系的时候，还需要一个容器存放 -->
  <div id="mouse-position"></div>
  </div>
</template>

<script setup>
import { onMounted } from 'vue'
import { initMap } from '@/Hooks/initMap.js'
import { FlyTo } from '../Home/Hooks/flyTo.js'

// onMounted(() => {
//   const map = initMap()
// })

import { nextTick } from "vue"
nextTick(()=>{
  const { map } = initMap()
  const reset = () => {
  const view = map.getView()
  FlyTo({ view })
}
  // 飞行视角
  setTimeout(() => {
    reset()
  }, 500)
})
</script>

<style scoped>
#map {
  position: fixed;
  width: 100vw;
  height: 100vh;
  z-index: -1;
}
#mouse-position {
  position: fixed;
  bottom: 35px;
  left: 7px;
  background-color: rgba(255, 255, 255, 0.497);
  border-radius: 2px;
}
</style>

<!-- 这是控制 openlayer 控件的样式 -->
<style>
/* 放大缩小控件 */
.ol-zoom {
  margin-top: 80px;
}

.ol-zoom-extent {
  margin-top: 80px;
}

/* zoomslider控件 */
.ol-zoomslider {
  margin-top: 125px;
  background-color: #668cbeb3;
}
.ol-zoomslider:hover {
  background-color: #668cbeb3;
}
.ol-zoomslider button {
  background-color: #fff;
}
.ol-zoomslider button:hover {
  background-color: none;
}

/* 鹰眼 */
.ol-custom-overviewmap,
.ol-custom-overviewmap.ol-uncollapsible {
  bottom: 10px;
  left: auto;
  right: 5px;
  top: auto;
}
.ol-custom-overviewmap:not(.ol-collapsed) {
  border: 1px solid black;
}
.ol-custom-overviewmap .ol-overviewmap-map {
  border: none;
  width: 300px;
}
.ol-custom-overviewmap .ol-overviewmap-box {
  border: 2px solid red;
}
.ol-custom-overviewmap:not(.ol-collapsed) button {
  bottom: auto;
  left: auto;
  right: 1px;
  top: 1px;
}

/* 全屏控件 */
.ol-full-screen {
  margin-top: 60px;
}

.ol-attribution {
  margin-top: 200px;
}

/**
* 提示框的样式信息
*/
.tooltip {
  position: relative;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 4px;
  color: white;
  padding: 4px 8px;
  opacity: 0.7;
  white-space: nowrap;
}

.tooltip-measure {
  opacity: 1;
  font-weight: bold;
}

.tooltip-static {
  background-color: #ffcc33;
  color: black;
  border: 1px solid white;
}

.tooltip-measure:before,
.tooltip-static:before {
  border-top: 6px solid rgba(0, 0, 0, 0.5);
  border-right: 6px solid transparent;
  border-left: 6px solid transparent;
  content: '';
  position: absolute;
  bottom: -6px;
  margin-left: -7px;
  left: 50%;
}

.tooltip-static:before {
  border-top-color: #ffcc33;
}
</style>
